<template>
  <view class="flex-1">
		<template v-if="settingInfo.switchCharter == 1">
			<!-- #ifdef MP-WEIXIN -->
			<customNav color="#ffffff" title="特惠包机询价表单"></customNav>
			<view
				class="bg-header pb-[74rpx] pt-[34rpx]"
				:style="{ paddingTop: navHeight * 2 + 34 + 'rpx' }"
			>
				<view class="px-[38rpx] pb-[74rpx] pt-[34rpx]">
					<view class="text-white text-[48rpx] leading-[56rpx]"
						>请提交您的预定信息</view
					>
					<view class="text-white text-xs leading-5 mt-2">
						<view>我们的工作人员将在2小时内与您联系</view>
						<view class="pt-1">（北京时间9:00-20:00）</view>
					</view>
				</view>
			</view>
			<!-- #endif -->
			<view class="px-5 -mt-[204rpx]">
				<view
					class="bg-theme px-[30rpx] pt-[20rpx] flex justify-between items-start rounded-xl h-16"
				>
					<view class="flex items-center pl-[20rpx]">
						<image src="@/static/hot-air.png" class="w-5 h-5 mt-[6rpx]"></image>
						<view class="text-xl text-white pl-[14rpx]">飞机信息</view>
					</view>
					<view class="text-white text-xl font-medium">{{ state.title }}</view>
				</view>
				<view class="bg-white rounded-xl p-5 mt-[-40rpx]">
					<view
						class="u-border rounded mb-[30rpx] flex items-center justify-between"
					>
						<view class="flex flex-col justify-between flex-1 py-3">
							<view class="flex items-center">
								<view class="px-3 aaa mt-1">
									<image class="w-6 h-6" src="@/static/fly-t.png"></image>
								</view>
								<view class="text-[#192031] text-base font-[800] ml-3">{{
									state.startCity
								}}</view>
							</view>
							<view class="flex-1 pl-3 pr-[36rpx] py-[20rpx]">
								<view style="border-bottom: 2rpx solid #eceff4"></view>
							</view>
							<view class="flex items-center">
								<view class="px-3 aaa mt-1">
									<image class="w-6 h-6" src="@/static/fly-b.png"></image>
								</view>
								<view class="text-[#192031] text-base font-[800] ml-3">{{
									state.endCity
								}}</view>
							</view>
						</view>
						<image
							src="@/static/change.png"
							class="w-10 h-10 rounded-full mr-[30rpx]"
							@click="changeCity"
						></image>
					</view>
					<view
						class="u-border h-[104rpx] flex items-center rounded mb-[30rpx]"
						@click="calendarShow = true"
					>
						<view class="px-3 aaa mt-1">
							<image class="w-6 h-6" src="@/static/icon-6.png"></image>
						</view>
						<view class="text-[#192031] text-base font-[800] ml-3">{{
							form.flight_date
						}}</view>
					</view>
					<view class="mb-[30rpx]">
						<view class="pb-[20rpx] text-[#4B535A] text-base"
							><text class="text-[#F62427] text-base">* </text> 联系人</view
						>
						<up-input
							:customStyle="customStyle"
							placeholder="请输入联系人"
							border="surround"
							clearable
							v-model="form.contactor"
						></up-input>
					</view>
					<view class="mb-[30rpx]">
						<view class="pb-[20rpx] text-[#4B535A] text-base"
							><text class="text-[#F62427] text-base">* </text>联系电话</view
						>
						<up-input
							type="number"
							:customStyle="customStyle"
							placeholder="请输入联系电话"
							border="surround"
							clearable
							v-model="form.phone"
						></up-input>
					</view>
					<view class="mb-[30rpx]">
						<view class="pb-[20rpx] text-[#4B535A] text-base">公司名称</view>
						<up-input
							:customStyle="customStyle"
							placeholder="请输入公司名称"
							border="surround"
							clearable
							v-model="form.company"
						></up-input>
					</view>
					<view class="">
						<view class="pb-[20rpx] text-[#4B535A] text-base">备注信息</view>
						<up-textarea
							v-model="form.note"
							height="100"
							placeholder="请输入备注信息"
							border="surround"
						></up-textarea>
					</view>
				</view>
			</view>
			<view class="w-full px-[30rpx] pt-10 pb-[40rpx]">
				<view
					@click="submit"
					class="bg-theme rounded w-full font-medium text-lg text-white h-[90rpx] leading-[90rpx] text-center"
				>
					提交询价
				</view>
			</view>
			<up-overlay :show="show">
				<view
					class="flex flex-col items-center h-full justify-center pb-10"
					@click.stop
				>
					<view
						class="w-[530rpx] h-[718rpx] bg-white rounded-[20rpx] pt-[56rpx] px-5 pb-6 flex flex-col items-center"
					>
						<view class="font-medium text-base text-black">提交成功</view>
						<view
							class="text-xs text-[#4C4C4] leading-5 text-center px-1 mt-[30rpx]"
						>
							<view>工作人员将在2小时内与您联系 </view>
							<view>（北京时间9:00-20：00），</view>
							<view> 也可通过下方微信二维码添加工作人员。</view>
						</view>
						<image
							show-menu-by-longpress
							:src="weChatImg"
							class="w-[360rpx] h-[360rpx]"
							mode="widthFix"
						></image>
						<view class="text-[#858585] text-base leading-4 mt-2"
							>长按识别二维码</view
						>
					</view>
					<image
						@click="ugoBack"
						src="@/static/close.png"
						class="w-8 h-8 mt-5"
					></image>
				</view>
			</up-overlay>
			<u-calendar
				@close="calendarShow = false"
				monthNum="20"
				:show="calendarShow"
				@confirm="confirm"
			></u-calendar>
		</template>
		<view v-else class="w-full flex-1 h-full flex flex-col bg-white">
		  <image
		    class="w-full"
		    mode="widthFix"
		    src="https://ykx-1254116920.cos.ap-nanjing.myqcloud.com/aircraft/111.jpg"
		  ></image>
		</view>
  </view>
</template>

<script setup lang="ts">
import { saveCharterQuote_api } from "@/api/index";
import { ref, reactive, computed } from "vue";
import { onPageScroll, onLoad } from "@dcloudio/uni-app";
import dayjs from "dayjs";
import { useUserStore } from "@/stores/user.js";
const userStore = useUserStore();
const settingInfo = computed(() => userStore.setting);
const customStyle = computed(() => ({
  height: "84rpx",
}));
const show = ref(false);
const calendarShow = ref(false);
const form = reactive({
  charter_id: "",
  contactor: "",
  phone: "",
  company: "",
  note: "",
  flight_date: dayjs().format("YYYY/MM/DD"),
  start_area_id: "",
  end_area_id: "",
});
const state = reactive({
  title: "",
  startCity: "",
  endCity: "",
});

const weChatImg = ref("");
const submit = () => {
  if (!form.contactor)
    return uni.showToast({ title: "请输入联系人", icon: "none" });
  if (!form.phone)
    return uni.showToast({ title: "请输入联系电话", icon: "none" });
  if (form.phone && !uni.$u.test.mobile(form.phone))
    return uni.showToast({ title: "请输入正确的手机号", icon: "none" });
  
  uni.showLoading();
  saveCharterQuote_api(form)
    .then((res) => {
      weChatImg.value = res.qr_img;
      show.value = true;
    })
    .finally(() => {
      uni.hideLoading();
    });
};

const confirm = (e) => {
  form.flight_date = e[0].replace(/-/g, "/");
  calendarShow.value = false;
};

const changeCity = () => {
  [form.start_area_id, form.end_area_id] = [
    form.end_area_id,
    form.start_area_id,
  ];
  [state.startCity, state.endCity] = [state.endCity, state.startCity];
};

onLoad(({ id, startCity, endCity, start_area_id, end_area_id, title }) => {
  form.charter_id = id;
  form.start_area_id = start_area_id;
  form.end_area_id = end_area_id;
  state.startCity = startCity;
  state.endCity = endCity;
  state.title = title;
});

// #ifdef MP
const systemInfo = uni.getSystemInfoSync();
// 获取胶囊按钮位置信息
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();

// 计算导航栏高度（状态栏高度 + 胶囊按钮高度 + 上下边距）
const navHeight =
  menuButtonInfo.bottom + menuButtonInfo.top - systemInfo.statusBarHeight;
// #endif
onPageScroll((e) => {});

const ugoBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
:deep(.u-border) {
  border-color: #eceff4 !important;
}
.aaa {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 46rpx;
    background: #eceff4;
    right: 0;
  }
}
.bg-header {
  background: url("https://ykx-1254116920.cos.ap-nanjing.myqcloud.com/aircraft/fly/fly-4.png");
  width: 100%;
  height: 676rpx;
  background-size: 100% 100%;
}
</style>
